<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- v-for:列表渲染
               用法：v-for="(item,index) in 数组"
                  item：每一项的值
                  index:下标
                  index可以省略
                  它们的名字可以随便改
                  使用范围只限制于当前标签


    ['v-text', 'v-html', 'v-model', 'v-on', 'v-bind'].forEach((item,index)=>{
        item:每一项的值
        index:下标
    })  
    -->
    <div id="app">
      <ul>
        <li>{{list[0]}}</li>
        <li>{{list[1]}}</li>
        <li>{{list[2]}}</li>
        <li>{{list[3]}}</li>
        <li>{{list[4]}}</li>
      </ul>
      <hr />
      <ul>
        <li v-for="(item,index) in list" @click="liClick(item)">
          {{item}}---------{{index}}
        </li>
      </ul>
      <hr />
      <ul>
        <li v-for="index in list">{{index}}</li>
      </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          list: ['v-text', 'v-html', 'v-model', 'v-on', 'v-bind']
        },
        methods: {
          liClick (xxx) {
            console.log('liClick', xxx)
          }
        }
      })
    </script>
  </body>
</html>
